<template>
	<view>
		<u-navbar :fixed="false" title="打印机列表" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff"></u-navbar>

		<view class="list" v-for="(item, index) in data" :key="index">
			<view v-if="item.isConnected==false" class="print" @click="connect(item.address)">
				连接
			</view>
			<view v-else class="printOff" @click="disconnect">
				断开
			</view>
			<view class="printerName">{{item.deviceName}}</view>
			<view class="printerAddr">{{item.address}}</view>
		</view>

		<!-- <view class="but"> -->
		<!-- <button @click="pairedDevices">获取已配对的蓝牙设备</button> -->
		<!-- <button @click="searchDevices">搜索蓝牙</button>
			<button @click="cancelSearch">取消搜索</button> -->
		<!-- <button @click="openTscPage">TSC 打印标签</button> -->
		<!-- <button @click="state">打印机状态</button> -->
		<!-- </view> -->

		<!-- <view>{{tip}}</view> -->
	</view>
</template>

<script>
	const plug = uni.requireNativePlugin('Html5app-Gprinter');
	export default {
		data() {
			return {
				data: [],
				tip: ''
			}
		},
		onLoad() {
			let _this = this;
			_this.pairedDevices();
			_this.searchDevices();
		},
		onUnload() {
			// 停止搜索
			this.cancelSearch();
		},
		methods: {
			pairedDevices() {

				let _this = this;
				let connectDevice = uni.getStorageSync('connectDevice');
				if (connectDevice) {
					let isExist = _this.data.some(item => item.address == connectDevice.address);
					if (!isExist) {
						_this.data.push(JSON.parse(connectDevice));
						_this.connect(connectDevice.address);
					}
				}
				// 	let _this = this;
				// 	//获取已配对的蓝牙设备
				// 	plug.pairedDevices(function(e) {
				// 		console.log(JSON.stringify(e));
				// 		if (e.code == 0) {
				// 			let ss = [];
				// 			for (let i = 0; i < e.list.length; i++) {
				// 				ss.push(e.list[i]);
				// 				console.log(e.list[i]);
				// 			}
				// 			_this.data = ss;
				// 		} else {
				// 			uni.showToast({
				// 				title: "未有配对的设备",
				// 				icon: "none"
				// 			});
				// 		}

				// 	});

			},
			searchDevices() {
				let _this = this;
				//搜索蓝牙设备
				plug.searchDevices(function(e) {
					// console.log("搜索蓝牙设备" + JSON.stringify(e)); 
					if (e.code == "0") {
						// let ss = [];
						for (let i = 0; i < e.list.length; i++) {
							let isExist = _this.data.some(item => item.address == e.list[i].address);
							if (!isExist) {
								e.list[i].isConnected = false;
								_this.data.push(e.list[i]);
							}
						}
					} else {
						uni.showToast({
							title: e.msg,
							icon: "none"
						});
					}
				});
			},
			disconnect() {
				//断开打印机
				let _this = this;
				plug.disconnect({}, ret => {
					_this.tip = JSON.stringify(ret);
					// console.log(_this.tip);
					// console.log(JSON.stringify(_this.data))
					if (ret.code == 0) {
						_this.$utils.showLoading(ret.msg)
					} else if (ret.code == 1) {
						uni.showToast({
							title: ret.msg
						})
						_this.$utils.hideLoading()
					}
					// 断开连接
					let matchPrinter = _this.data.find(item => item.isConnected == true);
					matchPrinter.isConnected = false;
					uni.removeStorageSync('connectDevice'); // 清除已连接设备
				});
			},
			cancelSearch() {

				//取消搜索
				plug.cancelSearch();
			},
			connect(address) {
				let _this = this;
				//连接打印机
				// console.log(address);
				// 定义状态码和消息  
				const STATUS_CODES = {
					CONNECTING: {
						code: 2,
						msg: '连接中'
					},
					CONNECTED: {
						code: 3,
						msg: '已连接'
					},
					DISCONNECTING: {
						code: 0,
						msg: '断开中,请稍等...'
					},
					DISCONNECTED: {
						code: 1,
						msg: '已断开连接'
					}
				};

				function showLoading(message) {
					_this.$utils.showLoading(message);
				}

				function hideLoading() {
					_this.$utils.hideLoading();
				}

				plug.connectDevices({
					address: address
				}, ret => {

					_this.tip = JSON.stringify(ret);
					// console.log("回调:" + JSON.stringify(ret));

					switch (ret.code) {
						case STATUS_CODES.CONNECTING.code:
							showLoading(STATUS_CODES.CONNECTING.msg);
							break;

						case STATUS_CODES.CONNECTED.code:
							uni.showToast({
								title: '连接成功'
							});
							hideLoading();
							let matchPrinter = _this.data.find(item => item.address === address);
							if (matchPrinter) {
								matchPrinter.isConnected = true;
								uni.setStorageSync('connectDevice', JSON.stringify(matchPrinter));
							}
							break;

						case STATUS_CODES.DISCONNECTING.code:
							showLoading(STATUS_CODES.DISCONNECTING.msg);
							break;

						case STATUS_CODES.DISCONNECTED.code:
							uni.showToast({
								title: ret.msg
							});
							break;

							// 默认情况或处理其他状态码  
						default:
							_this.$utils.msg('连接错误，请重试')
					}

				});

			},
			state() {

				//查询打印机状态 
				let _this = this;
				plug.state({}, ret => {

					_this.tip = JSON.stringify(ret);
					// console.log(_this.tip);
				});
			},
			openTscPage() {
				uni.navigateTo({
					url: "./tsc_page"
				});
			}
		}
	}
</script>

<style>
	.list {
		margin: 15px;
		font-size: 14px;
		border-bottom: solid 1px #999999;
	}

	.but {
		margin: 10px;
		margin-top: 35px;
	}

	.print {
		float: right;
		height: 30px;
		line-height: 30px;
		text-align: center;
		width: 50px;
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 5px;
	}

	.printOff {
		float: right;
		height: 30px;
		line-height: 30px;
		text-align: center;
		width: 50px;
		background-color: #999999;
		color: #FFFFFF;
		border-radius: 5px;
	}

	.printerName {
		font-weight: 500;
	}

	.printerAddr {
		font-size: 12px;
	}

	button {
		margin-bottom: 30px;
		font-size: 14px;
	}
</style>